<!DOCTYPE html>
<html lang="zh-hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}管理后台{% endblock %}</title>
    {% load static %}
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
    <link href="{% static 'css/all.min.css' %}" rel="stylesheet">
    <link href="{% static 'css/custom_admin.css' %}" rel="stylesheet">
    {% block extra_css %}{% endblock %}
</head>
<body>
    <nav class="topbar navbar navbar-expand navbar-dark">
        <div class="container-fluid">
            <a class="navbar-brand fw-bold" href="{% url 'custom_admin:dashboard' %}">
                <i class="fas fa-cogs me-2"></i>管理后台
            </a>
            {% if user.is_authenticated %}
            <div class="navbar-nav ms-auto">
                <div class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle d-flex align-items-center" href="#" role="button" data-bs-toggle="dropdown">
                        <i class="fas fa-user-circle me-2" style="font-size: 1.5rem;"></i>
                        <span>{{ user.username }}</span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-end">
                        <li><a class="dropdown-item" href="#"><i class="fas fa-user me-2"></i>个人资料</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="{% url 'custom_admin:logout' %}"><i class="fas fa-sign-out-alt me-2"></i>退出</a></li>
                    </ul>
                </div>
            </div>
            {% endif %}
        </div>
    </nav>

    {% if user.is_authenticated %}
    <nav class="sidebar">
        <div class="position-sticky pt-3">
            <ul class="nav flex-column">
                <li class="nav-item">
                    <a class="nav-link d-flex align-items-center {% if request.resolver_match.url_name == 'dashboard' %}active{% endif %}" 
                       href="{% url 'custom_admin:dashboard' %}" data-title="仪表盘">
                        <i class="fas fa-home me-3"></i>
                        <span class="flex-grow-1 text-start">仪表盘</span>
                        <span class="open-new-tab" title="在新窗口打开">
                            <i class="fas fa-external-link-alt"></i>
                        </span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link d-flex align-items-center {% if 'article' in request.resolver_match.url_name %}active{% endif %}" 
                       href="{% url 'custom_admin:article_list' %}" data-title="文章管理">
                        <i class="fas fa-file-alt me-3"></i>
                        <span class="flex-grow-1 text-start">文章管理</span>
                        <span class="open-new-tab" title="在新窗口打开">
                            <i class="fas fa-external-link-alt"></i>
                        </span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link d-flex align-items-center {% if 'category' in request.resolver_match.url_name %}active{% endif %}" 
                       href="{% url 'custom_admin:category_list' %}" data-title="分类管理">
                        <i class="fas fa-list me-3"></i>
                        <span class="flex-grow-1 text-start">分类管理</span>
                        <span class="open-new-tab" title="在新窗口打开">
                            <i class="fas fa-external-link-alt"></i>
                        </span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link d-flex align-items-center {% if 'review' in request.resolver_match.url_name %}active{% endif %}" 
                       href="{% url 'custom_admin:article_review_list' %}" data-title="文章审核">
                        <i class="fas fa-check-circle me-3"></i>
                        <span class="flex-grow-1 text-start">文章审核</span>
                        <span class="open-new-tab" title="在新窗口打开">
                            <i class="fas fa-external-link-alt"></i>
                        </span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link d-flex align-items-center {% if 'department' in request.resolver_match.url_name %}active{% endif %}" 
                       href="{% url 'custom_admin:department_list' %}" data-title="部门管理">
                        <i class="fas fa-building me-3"></i>
                        <span class="flex-grow-1 text-start">部门管理</span>
                        <span class="open-new-tab" title="在新窗口打开">
                            <i class="fas fa-external-link-alt"></i>
                        </span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link d-flex align-items-center {% if 'permission' in request.resolver_match.url_name and 'group' not in request.resolver_match.url_name %}active{% endif %}" 
                       href="{% url 'custom_admin:permission_list' %}" data-title="权限管理">
                        <i class="fas fa-user-lock me-3"></i>
                        <span class="flex-grow-1 text-start">权限管理</span>
                        <span class="open-new-tab" title="在新窗口打开">
                            <i class="fas fa-external-link-alt"></i>
                        </span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link d-flex align-items-center {% if 'permission_group' in request.resolver_match.url_name %}active{% endif %}" 
                       href="{% url 'custom_admin:permission_group_list' %}" data-title="权限组管理">
                        <i class="fas fa-users-cog me-3"></i>
                        <span class="flex-grow-1 text-start">权限组管理</span>
                        <span class="open-new-tab" title="在新窗口打开">
                            <i class="fas fa-external-link-alt"></i>
                        </span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link d-flex align-items-center {% if 'user_group' in request.resolver_match.url_name %}active{% endif %}" 
                       href="{% url 'custom_admin:user_group_list' %}" data-title="用户组管理">
                        <i class="fas fa-users me-3"></i>
                        <span class="flex-grow-1 text-start">用户组管理</span>
                        <span class="open-new-tab" title="在新窗口打开">
                            <i class="fas fa-external-link-alt"></i>
                        </span>
                    </a>
                </li>
            </ul>
        </div>
    </nav>
    {% endif %}

    <div class="main-content">
        {% block content %}
        {% endblock %}
    </div>

    <script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
    <script>
        // 添加一些交互效果
        document.addEventListener('DOMContentLoaded', function() {
            // 为表格行添加悬停效果
            const tableRows = document.querySelectorAll('tbody tr');
            tableRows.forEach(row => {
                row.addEventListener('mouseenter', function() {
                    this.style.backgroundColor = '#f8f9fa';
                });
                row.addEventListener('mouseleave', function() {
                    this.style.backgroundColor = '';
                });
            });
            
            // 为卡片添加动画效果
            const cards = document.querySelectorAll('.card');
            cards.forEach(card => {
                card.style.opacity = '0';
                card.style.transform = 'translateY(20px)';
                
                setTimeout(() => {
                    card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
                    card.style.opacity = '1';
                    card.style.transform = 'translateY(0)';
                }, 100);
            });
            
            // 为新窗口打开图标添加点击事件
            const openNewTabIcons = document.querySelectorAll('.open-new-tab');
            openNewTabIcons.forEach(icon => {
                icon.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    const link = this.closest('.nav-link');
                    const url = link.getAttribute('href');
                    window.open(url, '_blank');
                });
            });
            
            // 延迟显示新窗口打开图标（悬停1秒后显示）
            const navLinks = document.querySelectorAll('.sidebar .nav-link');
            let hoverTimeout;
            
            navLinks.forEach(link => {
                link.addEventListener('mouseenter', function() {
                    const openNewTabIcon = this.querySelector('.open-new-tab');
                    hoverTimeout = setTimeout(() => {
                        openNewTabIcon.style.opacity = '1';
                    }, 1000); // 1秒延迟
                });
                
                link.addEventListener('mouseleave', function() {
                    clearTimeout(hoverTimeout);
                    const openNewTabIcon = this.querySelector('.open-new-tab');
                    openNewTabIcon.style.opacity = '0';
                });
            });
        });
    </script>
    {% block extra_js %}{% endblock %}
</body>
</html>